<template>
	<div>
		<NavigationBar title-text="服务详情" :custom-back-func="handleNavigateBack" />
		<Message ref="message" />
		<Loading ref="loading" fullscreen />

		<div class="server-detail-container w-full pt-160rpx pb-0rpx px-0rpx bg-hex-a0cfff overflow-x-hidden">
			<div class="w-full min-h-90vh flex-column bg-white overflow-x-hidden">
				<div class="w-full h-400rpx">
					<image class="w-full h-full" :src="serveinfo.img" mode="aspectFill" />
				</div>
				<div class="w-full">
					<div class="bor w-full mt-20rpx pb-20rpx pl-30rpx text-30rpx">上门编号：{{ serveinfo.id }}</div>
					<div class="bor w-full mt-20rpx pb-20rpx pl-30rpx text-30rpx">科室名称：{{ serveinfo.name }}</div>
					<div class="bor w-full mt-20rpx pb-20rpx pl-30rpx text-30rpx">科室分类：{{ serveinfo.classify }}</div>
					<div class="bor w-full mt-20rpx pb-20rpx pl-30rpx text-30rpx">费用：{{ serveinfo.fees }}元</div>
					<div class="bor w-full mt-20rpx pb-20rpx pl-30rpx text-30rpx">
						{{ role === 'doctor' ? '医生工号：' : '护士工号：' }}{{ serveinfo.jobnumber }}
					</div>
					<div class="bor w-full mt-20rpx pb-20rpx pl-30rpx text-30rpx">
						{{ role === 'doctor' ? '医生姓名：' : '护士姓名：' }}{{ serveinfo.userName }}
					</div>
				</div>
				<div class="w-full">
					<div class="p-30rpx text-30rpx">
						<div>主治方面</div>
						<div class="rad w-full p-20rpx mt-20rpx">{{ serveinfo.servicename }}</div>
					</div>
					<div class="p-30rpx text-30rpx">
						<div>服务内容</div>
						<div class="rad w-full p-20rpx mt-20rpx">{{ serveinfo.content }}</div>
					</div>
					<div class="p-30rpx text-30rpx">
						<div>就医证明</div>
						<div class="rad w-full p-20rpx mt-20rpx">{{ serveinfo.prove }}</div>
					</div>
				</div>
				<div class="foot w-full flex items-center justify-center pb-50rpx mt-20rpx">
					<u-button type="primary" shape="circle" size="medium" @click="gotoDetail">预约服务</u-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import Message from '@/components/message/src/message.vue';
import type { MessageMethod } from '@/components/message';
import Loading from '@/components/loading/src/loading.vue';
import type { LoadingMethod } from '@/components/loading';
import NavigationBar from '@/components/navigation-bar/src/navigation-bar.vue';
import { gotoPage } from '@/common/utils';
import { useUserStore } from '@/store';
import { userApi, serveApi } from '@/service/api';

const userStore = useUserStore();

const message = ref<InstanceType<typeof Message> & MessageMethod>(null);
const loading = ref<InstanceType<typeof Loading> & LoadingMethod>(null);
const id = ref<string>('');
const role = ref<string>('');
const serveinfo = ref({});
// 初始化
const init = async () => {
	const res = await serveApi.getServiceInfo({ searchKey: id.value, role: role.value });
	console.log(res.data?.data.result[0]);
	serveinfo.value = res.data?.data.result[0];
};
// 跳转预约页面
const gotoDetail = useThrottleFn((): void => {
	gotoPage(`/pages/booking/booking?id=${id.value}&role=${role.value}`)
}, 2000, false, true);

// 返回上一页
const handleNavigateBack = (): void => {
	uni.navigateBack({
		delta: 2,
	});
};
onLoad((option) => {
	if (option) {
		id.value = option.id;
		role.value = option.role;
		console.log(id.value, role.value);
		init();
		return;
	}
	nextTick(() => uni.navigateBack());
});
onShow(() => {});
</script>

<style scoped lang="scss">
@import 'serveDetail';
</style>
